<template>
  <div id="logins">
    <div class="container">
      <h1>{{ isLogin ? "登录" : "注册" }}</h1>
      <div class="form">
        <input
          type="text"
          placeholder="您的手机号"
          v-model="userphone"
          @blur="checkphone2"
        />
        <input type="password" placeholder="您的密码" v-model="password" />
        <input
          v-show="!isLogin"
          type="password"
          placeholder="再次输入您的密码"
          v-model="rePassword"
        />
        <span class="text" @click="isLogin = false" v-if="isLogin"
          >如果您没有账号,点击此处注册</span
        >
        <span class="text" @click="isLogin = true" v-else
          >如果您有账号,点击此处登录</span
        >
        <button class="btn-login" v-if="!isDisable">
          {{ isLogin ? "登录" : "注册" }}
        </button>
        <button class="btn-login" @click="login" v-else>
          {{ isLogin ? "登录" : "注册" }}
        </button>
      </div>
    </div>
    <ul class="bg-squares">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
import myaxios from "@/http/MyAxios";
import httpApi from "@/http";

export default {
  data() {
    return {
      userphone: "",
      password: "",
      rePassword: "",
      isLogin: true, //是否是登录
      isDisable: true,
      
    };
  },
  methods: {
    login() {
      if (!this.userphone) {
        alert("请输入手机号");
        return false;
      }
      if (!this.checkuserPhone(this.userphone)) {
        alert("输入的手机号有误");
        return false;
      }
      if (!this.password) {
        alert("请输入密码");
        return false;
      }
      if (!this.isLogin && this.password !== this.rePassword) {
        alert("两次密码输入不一致");
        return false;
      }
      if (this.isLogin) {
        this.loginFun({
          user_phone: this.userphone,
          user_pwd: this.password,
        });
      } else {
        this.signFun({
          user_phone: this.userphone,
          user_pwd: this.password,
        });
      }
    },
    loginFun() {
      // 登录
      let params = {
        user_phone: this.userphone,
        user_pwd: this.password,
      };
      httpApi.loginApi.loginuser(params).then((res) => {
        console.log("登录", res);
        if (res.data.code == 200) {
          // 将用户对象存入vuex
          this.$store.commit("updateUser", res.data.data.user);
          // 将token也存在vuex中
          this.$store.commit("saveToken", res.data.data.token);
          this.$router.push("/");
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    signFun() {
      let params = {
        user_phone: this.userphone,
        user_pwd: this.password,
        user_sex:0,
      };
      httpApi.loginApi.reguser(params).then((res) => {
        console.log("注册", res);
        if (res.data.code == 200) {
          console.log(res.data.res);
          alert("注册成功请登录");
          this.isLogin = true;
        } else {
          alert("注册失败请检查");
        }
      });
    },
    checkuserPhone() {
      return /^1[3456789]\d{9}$/.test(this.userphone);
    },
    checkphone2() {
      if (!this.isLogin) {
        let params = {
          user_phone: this.userphone,
        };
        httpApi.loginApi.checkphone(params).then((res) => {
          console.log("手机查重", res);
          console.log(res.data.code);
          if (res.data.code == 300) {
            alert("手机号已注册");
            this.isDisable = false;
          } else {
            this.isDisable = true;
          }
        });
      }
    },
  },
  watch: {
    isLogin(val) {
      this.userphone = "";
      this.password = "";
      this.rePassword = "";
    },
  },
};
</script>

<style lang="scss" >
// @import "../common/login.css";
* {
  /* 初始化 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

span.text {
  width: 250px;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  text-align: end;
  transform: translateY(-2px);
}

#logins {
  height: 100vh;
  /* 弹性布局 居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变背景 */
  background-image: linear-gradient(
    to right top,
    #051937,
    #004d7a,
    #008793,
    #00bf72,
    #a8eb12
  );
  /* 溢出隐藏 */
  overflow: hidden;
}

.container {
  text-align: center;
  color: #fff;
}

.container h1 {
  font-size: 40px;
  font-weight: 100;
  letter-spacing: 2px;
  margin-bottom: 15px;
  /* 过渡效果 */
  transition: 1s ease-in-out;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  opacity: 1;
  /* 不透明度改变时的过渡效果 */
  transition: opacity 0.5s;
}

.form input {
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  width: 250px;
  padding: 10px 15px;
  border-radius: 3px;
  margin: 0 auto 10px auto;
  text-align: center;
  color: #fff;
  font-size: 15px;
  transition: 0.25s;
}

.form input::placeholder {
  color: #fff;
  font-size: 14px;
  font-weight: 300;
}

.form input:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.form input:focus {
  background-color: #fff;
  width: 300px;
  color: #051937;
}

.btn-login {
  outline: none;
  background-color: #fff;
  color: #051937;
  border: none;
  width: 250px;
  padding: 10px 15px;
  border-radius: 3px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.25s;
}

.btn-login:hover {
  background-color: #f5f7f9;
}

/* 背景方块 */
.bg-squares {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.bg-squares li {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  position: absolute;
  bottom: -160px;
  /* 执行动画：动画名 时长 线性 无限次播放 */
  animation: square 20s linear infinite;
}

/* 为每一个方块设置不同的位置、大小、动画延迟时间、动画时长、背景色 */
.bg-squares li:nth-child(1) {
  left: 10%;
}

.bg-squares li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  /* 动画延迟时间 */
  animation-delay: 2s;
  /* 动画时长 */
  animation-duration: 17s;
}

.bg-squares li:nth-child(3) {
  left: 25%;
  animation-delay: 4s;
}

.bg-squares li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.25);
  animation-duration: 22s;
}

.bg-squares li:nth-child(5) {
  left: 70%;
}

.bg-squares li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.2);
  animation-delay: 3s;
}

.bg-squares li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  animation-delay: 7s;
}

.bg-squares li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  animation-delay: 15s;
  animation-duration: 40s;
}

.bg-squares li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  animation-delay: 2s;
  animation-duration: 40s;
}

.bg-squares li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  animation-delay: 11s;
}

.container.success h1 {
  transform: translateY(75px);
}

.container.success .form {
  opacity: 0;
  visibility: hidden;
}

/* 定义动画 */
@keyframes square {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-120vh) rotate(600deg);
  }
}
</style>